<template>
    <div class="loginWarp">
        <div class="logo"></div>
        <h2 class="title">马蜂窝信息流管理平台</h2>
        <el-form class="formWarp" :model="form" :rules="rules" ref="form">
            <el-form-item prop="loginName">
                <el-input v-model.trim="form.loginName" placeholder="用户名" :maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="pwd">
                <el-input type="password" v-model.trim="form.pwd" placeholder="密码" :maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="verifyCode">
                <el-col :span="11">
                    <el-input v-model.trim="form.verifyCode" type="text" placeholder="验证码" :maxlength="6"></el-input>
                </el-col>
                <el-col class="line tc" :span="2"></el-col>
                <el-col :span="11" class="ml20">
                    <img class="verifyImg" :src="verifyImgUrl" @click="refreshImg">
                </el-col>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button style="width: 100%" type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import a from './particles';
    import cookie from 'js-cookie';
    import userStore from '../common/js/userStore';
    import userFormat from '../common/js/userFormat';

    export default {
        data() {
            return {
                checked: false,
                form: {
                    loginName: '',
                    pwd: '',
                    verifyCode: ''
                },
                baseVerifyImgUrl: '',
                verifyImgUrl: '',
                rules: {
                    loginName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    pwd: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    verifyCode: [{required: true, message: '请输入验证码', trigger: 'blur'}]
                }
            };
        },

        beforeCreate() {

        },
        created() {
            // 获取cookie的值
            let loginName = cookie.get('loginName');
            if (loginName) {
                this.checked = true;
                this.form.loginName = loginName;
            }

            this.baseVerifyImgUrl = this.utils.getConfig().server + 'auth/verifyCodeStream';
            this.refreshImg();
        },
        methods: {
            login() {
                this.$refs['form'].validate(valid => {
                    // 用户登录
                    if (valid) {
                        let that = this;
                        this.req.post('auth/login', Object.assign({}, this.form)).then(resp => {
                            if (that.checked && cookie.get('loginName') !== that.form.loginName) {
                                cookie.set('loginName', that.form.loginName, {expires: 7});
                            }
                            // 缓存登录信息
                            userStore.saveUser(userFormat(resp.data));
                            document.location.replace('./main.html');
                        }).catch(eror => {
                            this.refreshImg();
                            this.form.verifyCode = '';
                        });
                    }
                });
            },
            // 刷新验证码
            refreshImg() {
                this.verifyImgUrl = this.baseVerifyImgUrl + '?random=' + new Date().getTime();
            }
        },
        mounted() {
            // 刷新token
            //  this.$http.refreshToken();

        }
    };
</script>
<style lang="scss">
    @import "./login.scss";
</style>
